<!--
	此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=graph
-->
<!DOCTYPE html>
<html lang="en" style="height: 100%">
  <head>
    <meta charset="utf-8" />
  </head>
  <body style="height: 100%; margin: 0">
    <div id="container" style="height: 100%"></div>

    <script type="text/javascript" src="https://registry.npmmirror.com/jquery/3.7.1/files/dist/jquery.min.js"></script>
    <script type="text/javascript" src="https://registry.npmmirror.com/echarts/5.5.1/files/dist/echarts.min.js"></script>

    <script type="text/javascript" src="https://registry.npmmirror.com/echarts-graph-modularity/2/files/dist/echarts-graph-modularity.min.js"></script>

    <!-- 
    graph文档 https://echarts.apache.org/zh/option.html#series-graph.type 
    svg图标从 https://ikonate.com/ 导出
     -->
    <script type="text/javascript">
      var dom = document.getElementById('container');
      var myChart = echarts.init(dom, null, {
        renderer: 'canvas',
        useDirtyRect: false,
      });
      var app = {};
      var ROOT_PATH = '';
      var option;

      myChart.showLoading();
      $.getJSON(ROOT_PATH + '/arch/graph.json', function (graph) {
        myChart.hideLoading();
        // graph.nodes.forEach(function (node) {
        //   node.label = {
        //     show: true, //node.symbolSize > 30,
        //   };
        // });
        option = {
          title: {
            text: 'CMDB应用关系分析图',
            subtext: 'Default layout',
            top: 'bottom',
            left: 'right',
          },
          tooltip: {},
          legend: [
            {
              // selectedMode: 'single',
              data: graph.categories.map(function (a) {
                return a.name;
              }),
            },
          ],
          animation: true,
          series: [
            {
              name: 'CMDB',
              type: 'graph',
              legendHoverLink: false,
              layout: 'force',
              draggable: true,
              force: {
                repulsion: 600, // 设置斥力
              },

              data: graph.nodes,
              links: graph.links,
              categories: graph.categories,

              roam: true,
              label: {
                position: 'right',
                formatter: '{b}',
                show: true,
              },
              lineStyle: {
                color: 'source',
                curveness: 0.3,
              },
              emphasis: {
                focus: 'adjacency',
                lineStyle: {
                  width: 10,
                },
              },

              edgeSymbol: ['none', 'arrow'],
              symbolSize: 30,
            },
          ],
        };

        myChart.setOption(option);
      });

      if (option && typeof option === 'object') {
        myChart.setOption(option);
      }

      window.addEventListener('resize', myChart.resize);
      // 监听节点拖动事件
      myChart.on('dragend', function (params) {
        if (params.dataType === 'node') {
          console.log('节点拖动结束:', params);
          // 这里可以添加逻辑来处理拖动后的布局
          myChart.setOption({
            series: [
              {
                layout: 'force', // 重新布局
              },
            ],
          });
        }
      });
    </script>
  </body>
</html>
